<template>
  <div>
    <div class="user-info">
      <h2>用户反馈表单</h2>

      <!-- 姓名输入 -->
      <label for="name">姓名：</label>
      <input id="name" v-model="formData.name" type="text" placeholder="请输入您的姓名" />

      <!-- 反馈类型选择 -->
      <label for="feedback-type">反馈类型：</label>
      <select id="feedback-type" v-model="formData.feedbackType">
        <option value="">请选择反馈类型</option>
        <option value="complaint">投诉</option>
        <option value="suggestion">建议</option>
        <option value="other">其他</option>
      </select>

      <!-- 反馈详情 -->
      <label for="details">反馈详情：</label>
      <textarea id="details" v-model="formData.details" placeholder="请输入您的反馈内容" @input="updateCharacterCount"></textarea>
      <p>剩余字符：{{ remainingCharacters }}</p>

      <!-- 邮件通知 -->
      <p>是否同意接受邮件通知？</p>
      <label>
        <input type="radio" name="email-notify" v-model="formData.emailNotify" value="yes" /> 是
      </label>
      <label>
        <input type="radio" name="email-notify" v-model="formData.emailNotify" value="no" /> 否
      </label>

      <!-- 提交按钮 -->
      <button @click="submitFeedback">提交反馈</button>

      <!-- 提交结果展示 -->
      <div v-if="showFeedbackResult" class="feedback-result">
        <h3>反馈详情</h3>
        <p>姓名：{{ formData.name }}</p>
        <p>反馈类型：{{ formData.feedbackType }}</p>
        <p>反馈内容：{{ formData.details }}</p>
        <p>是否同意接收通知：{{ formData.emailNotify === 'yes' ? '是' : '否' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 表单数据模型
interface FormData {
  name: string;
  feedbackType: string;
  details: string;
  emailNotify: string;
}

// 表单数据
const formData = ref<FormData>({
  name: '',
  feedbackType: '',
  details: '',
  emailNotify: ''
});

// 是否显示反馈结果
const showFeedbackResult = ref(false);

// 最大字符限制
const maxCharacters = 100;

// 计算剩余字符数量
const remainingCharacters = computed(() => maxCharacters - formData.value.details.length);

// 更新字符计数
const updateCharacterCount = () => {
  if (formData.value.details.length > maxCharacters) {
    formData.value.details = formData.value.details.slice(0, maxCharacters);
  }
};

// 提交反馈
const submitFeedback = () => {
  // 显示反馈结果
  showFeedbackResult.value = true;

  // 清空表单
  formData.value = {
    name: '',
    feedbackType: '',
    details: '',
    emailNotify: ''
  };
};
</script>

<style scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], select, textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  resize: none;
}

.user-info button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.user-info button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
}

h3 {
  margin-top: 20px;
}

input[type="radio"] {
  margin-right: 5px;
}

.feedback-result {
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 20px;
}
</style>